<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="public.css">
</head>

<body>
  <div class="box">
    <canvas id="myCanvas" width="1500" height="800"></canvas>
  </div>
  <script type="text/javascript" src="drawFlowChart.js"></script>
  <script>
    var canvas = document.getElementById("myCanvas");
    var cxt = canvas.getContext('2d');
    var canWidth = cxt.canvas.clientWidth;
    var init = {
      top: 32,
      spaceH: 70
    };
    var row1 = {
      row: 1,
      y: '',
      isAverage: true,
      data: [{
          type: 'Step',
          text: '已接单',
          name: 'step_1_1',
          circle: true,
          arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_1_2'
            },
            {
              arrow: 'drawBottomToLeft',
              to: 'step_4_1',
              lineText: '审核'
            }
          ],
          requestData: {},
          method: {
            onmousemove: hoverhandle,
            onmouseleave: null,
            onclick: hoverSingleChart
          }
        },
        {
          type: 'Step',
          text: '交期已确认',
          circle: true,
          name: 'step_1_2',
          arrowArr: [{
            arrow: 'drawRightToLeft',
            to: 'step_1_3'
          }]
        },
        {
          type: 'Step',
          text: '面料已采购',
          circle: true,
          name: 'step_1_3',
          arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_1_4'
            },
            {
              arrow: 'drawBottomToTop',
              to: 'step_4_2'
            },
            {
              arrow: 'drawLeftBottomToRightTop',
              to: 'step_4_1',
              lineText: '你会'
            }
          ]
        },
        {
          type: 'Step',
          text: '裁剪数已确认',
          circle: true,
          name: 'step_1_4',
          arrowArr: [{
            arrow: 'drawRightToLeft',
            to: 'step_1_5'
          }, {
            arrow: 'drawTopToTop',
            to: 'step_1_8',
            lineText: '面料异常'
          }]
        },
        {
          type: 'Step',
          text: '抢单中',
          circle: true,
          name: 'step_1_5',
          arrowArr: [{
            arrow: 'drawRightToLeft',
            to: 'step_1_6'
          }, {
            arrow: 'drawTopToTop',
            to: 'step_1_8',
            lineText: '面料异常'
          }]
        },
        {
          type: 'Step',
          text: '裁片运输中',
          circle: true,
          name: 'step_1_6',
          arrowArr: [{
            arrow: 'drawRightToLeft',
            to: 'step_1_7',
            lineText: '皇甫'
          }, {
            arrow: 'drawTopToTop',
            to: 'step_1_8',
            lineText: '面料异常'
          }]
        },
        {
          type: 'Step',
          text: '加工中',
          circle: true,
          name: 'step_1_7',
          arrowArr: [{
            arrow: 'drawRightToLeft',
            to: 'step_1_8'
          }]
        },
        {
          type: 'Step',
          text: '成衣运输中',
          circle: true,
          name: 'step_1_8',
          arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_1_9'
            },
            //  {
            //   arrow: 'drawBottomToLeft',
            //   to: 'step_4_3',
            //   lineText: '顺丰'
            // }
          ]
        },
        {
          type: 'Step',
          text: '质检中',
          circle: true,
          name: 'step_1_9',
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_4_3'
          }]
        }


      ]
    }


    row1.data = calChartX(canWidth, row1.data, row1.y);
    var flowData = [{
        row: 1,
        y: '',
        isAverage: true,
        data: row1.data,
        method: {
          // onmouseenter: hoverhandle,
          onmousemove: hoverhandle,
          onmouseleave: hoverhandle,
          onclick: hoverSingleChart
        }
      },

      {
        row: 4,
        y: init.top + init.spaceH + 70,
        data: [{
          type: 'Step',
          text: '已终止',
          x: row1.data[1].x,
          circle: true,
          name: 'step_4_1',
          // arrowArr: [{
          //   arrow: 'drawRightToLeft',
          //   to: 'step_4_2'
          // }],
          color: {
            bgColor: '#ff6700', // 背景颜色
            borderColor: '#fff', // 背景颜色
            fontColor: '#fff', // 背景颜色
          }
        }, {
          type: 'Step',
          text: '终止确认中',
          circle: true,
          name: 'step_4_2',
          x: row1.data[2].x,
          arrowArr: [{
            arrow: 'drawLeftToRight',
            to: 'step_4_1',
            lineText: '运输'
          }, {
            arrow: 'drawRightTopToLeftBottom',
            to: 'step_1_5',
            lineText: '还宋'
          }]
        }, {
          type: 'Step',
          text: '返修中',
          circle: true,
          name: 'step_4_3',
          x: row1.data[8].x,
          arrowArr: [{
            arrow: 'drawTopToBottom',
            to: 'step_1_9'
          }, {
            arrow: 'drawLeftTopToRightBottom',
            to: 'step_1_8',
            lineText: '还宋'
          }]
        }],
      },
    ];
    drawFlowChart(cxt, canvas, flowData, init.top, init.spaceH);


    function hoverSingleChart(singleData) {
      console.log("---------鼠标事件-----------");
      console.log(singleData);
    }

    function hoverhandle(singleData) {
      console.log("---------鼠标事件22222-----------");
      console.log(singleData);
    }
  </script>
</body>

</html>